<template>
  <div class="containers">
    <div class="container">
      <div class="handle-box">
        <el-select v-model="state" @change="getData" placeholder="请选择类型" size="mini" class="mr10">
          <el-option v-for="(item, index) in navlist" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-input v-model="keyword" placeholder="订单号/用户电话/收货人" class="handle-input mr10" size="mini"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getData" size="mini">搜索</el-button>
        <el-button type="primary" @click="exportExcel" class="mr10" size="mini">导出</el-button>
      </div>

      <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header" size='mini' border :height="$tableHight"
        @selection-change="handleSelectionChange" v-loading="loading" id="out-table">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.order" border size="mini" style="width: 100%">
              <el-table-column label="商品图" width="100" align="center">
                <template slot-scope="scope">
                  <el-image class="table-td-thumb" :src="scope.row.goods.img" :preview-src-list="[scope.row.goods.img]"></el-image>
                </template>
              </el-table-column>
              <el-table-column label="商品名称" prop="goods.name" show-overflow-tooltip></el-table-column>
              <el-table-column label="商品数量" prop="number" width="100"></el-table-column>
              <!-- <el-table-column label="商品规格" prop="attributes" width="150"></el-table-column> -->
              <el-table-column label="商品价格" prop="money" width="100"></el-table-column>
              <!-- <el-table-column label="成本价" prop="discount" width="100"></el-table-column> -->

            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="orders" label="订单号" show-overflow-tooltip width="220"></el-table-column>
        <el-table-column prop="user.nickname" label="用户昵称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="user.mobile" label="用户电话" width="110"></el-table-column>
        <el-table-column label="退款方式" align="center">
          <template slot-scope="scope">
            {{ scope.row.order[0].refunds_type==1?'仅退款':'退货退款' }}
          </template>
        </el-table-column>
        <el-table-column label="退款原因" align="center" show-overflow-tooltip width="180">
          <template slot-scope="scope">
            {{ scope.row.order[0].reason }}
          </template>
        </el-table-column>
        <el-table-column label="退款说明" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.order[0].illustrate }}
          </template>
        </el-table-column>
        <el-table-column label="凭证" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.order[0].img && scope.row.order[0].img !== '[]'">
              <el-image
                style="width:100px;height:100px;"
                class="table-td-thumb"
                :src="geteval(scope.row.order[0].img)[0]"
                :preview-src-list="[...geteval(scope.row.order[0].img)]">
              </el-image>
            </div>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            {{$clearTimer(scope.row.order[0].CreatedAt)}}
          </template>
        </el-table-column>
        <el-table-column prop="money" label="金额"></el-table-column>
        <el-table-column label="支付方式" align="center">
          <template slot-scope="scope">
            {{['消费券','微信','支付宝','','','补贴券'][scope.row.pay_type]}}

          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleEdit(scope.row,scope.row.order[0])">详情</el-button>
            <el-button type="text" size="mini" v-if="scope.row.order[0].state==0"  @click="refundsList(scope.row.orders,0)">同意</el-button>
            <el-button type="text" size="mini" v-if="scope.row.order[0].state==0"  @click="refundsList(scope.row.orders,1)">拒绝</el-button>
            <el-button type="text" size="mini" v-if="scope.row.order[0].state==2"  @click="refundsList(scope.row.orders,0)">已收货,同意</el-button>
            <el-button type="text" size="mini" v-if="scope.row.order[0].state==2"  @click="refundsList(scope.row.orders,1)">未收货.拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">

        <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="query.pageIndex"
          :page-sizes="[20, 30, 40, 50]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import excel from '../../utils/excel.js'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  name: 'basetable',
  data() {
    return {
      query: {
        pageIndex: 1,
         pageSize: 20
      },
      state: 0,
      upload: '',
      editVisible: false,
      tableData: [],
      pageTotal: 0,
      imageUrl: '',
      videoUrl: '',
      type: 0,
      navlist: [
      {id:-1, name:'全部'},
      {id:0, name:'申请退款'},
      {id:1, name:'同意退款'},
      {id:2, name:'买家已发货'},
      {id:3, name:'退款失败'},
      {id:4, name:'退款成功'},
      {id:5, name:'退款中'},
      ],
      keyword: '',
      loading:false
    };
  },
  created() {
    this.getData()
  },
  methods: {
    exportExcel () {//导出

      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
            var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"), xlsxParam);
            var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
                    "订单.xlsx"
                );
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
    },
    //修改size值
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val
      this.getData();
    },
    geteval(img){
      return eval('('+img+')')
    },
    //退款
    refundsList(order,code){
      if(code==1){
        this.$prompt('请输入拒绝原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.request('business/refundsList/', 'POST', { order: order, code: code,reason:value}).then(res => {
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          this.getData()
        } else {
          this.$message.error(res.errmsg);
        }
      })
        }).catch(() => {

        });
      }else{
        this.request('business/refundsList/', 'POST', { order: order, code: code}).then(res => {
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          this.getData()
        } else {
          this.$message.error(res.errmsg);
        }
      })
      }

    },
    open(){

    },
    //获取数据
    getData() {
      	this.loading=true
        this.request('business/refundsList/', 'get', { page: this.query.pageIndex, size: this.query.pageSize,
          state:this.state,keyword:this.keyword}).then(res => {
        this.tableData = res.data.data
        console.log(this.tableData)
        this.pageTotal = res.data.total
      	this.loading=false
      })
    },
    // 发货
    handleEdit(e,item) {
      this.$router.push({ path: '/order/orderDetails', query: {
        id: e.orders ,
        refunds_type: item.refunds_type==1?'仅退款':'退货退款' ,
        reason: item.reason ,
        illustrate: item.illustrate ,
        img: item.img ,
        UpdatedAt:this.$clearTimer(item.CreatedAt),
        data:JSON.stringify(e.order)
      } });
    },
    cancel() {
      this.getData();
    },

    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.request('business/order/', 'delete', { ID: row.ID }).then(res => {
            if (res.errno == 0) {
              this.$message.success(res.errmsg);
              this.tableData.splice(index, 1)
              this.getData()
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 添加
    addregion() {
      this.$router.push({ path: '/commodity/addgoods' })
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val);
      this.getData();
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 100px; */
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;

  .el-image img {
    object-fit: cover;
  }
}

/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.table-td-thumb{
  margin: 0 !important;
}
.namelist{
  margin-left: 10px;
}
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}
</style>
